<template>
  <div>
    <el-main>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-button type="primary" v-if="rid == 0" @click="exports">导出记录</el-button>
        </el-col>
        <el-col>
            <div style="display: flex;justify-content: flex-end;">
              <el-input @clear="clear" @keyup.enter.native="search" clearable v-model="value" style="width: 300px;margin-left: 15px;" placeholder="搜索公司、联系人"  class="input-with-select">
                <el-button @click="search" slot="append" style="background-color:#45A321;color: #fff;border-radius:0;">搜索</el-button>
                <i slot="prefix-icon" class="el-icon-search"></i>
              </el-input>
            </div>
        </el-col>
      </el-row>

      <el-tabs style="margin:20px 0;" v-model="status" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0">
          <el-table
           :header-cell-style="{background:'#F3F8FE'}"
           @row-click="rowClick"
           align="center"
             :data="UserItem.slice((currentPage-1)*pagesize,currentPage*pagesize)"
             height="600"
             border
             style="width: 100%;margin: 20px 0;">
             <el-table-column
             align="center"
               prop="company"
               label="公司名称"
                width="220">
             </el-table-column>
             <el-table-column
             align="center"
               prop="username"
               label="联系人">
             </el-table-column>
             <el-table-column
             align="center"
               prop="mobile"
               label="电话">
             </el-table-column>
             <el-table-column
             align="center"
               prop="email"
               label="邮箱">
             </el-table-column>
             <el-table-column
             align="center"
               prop="create_on"
               label="申请时间">
             </el-table-column>
             <el-table-column
             align="center"
             width="100"
               label="操作">
               <template slot-scope="scope">
                 <div v-if="scope.row.status == '0' ">
                   <el-button  class="tg" @click="adopt(scope.row.id)" type="text">通过</el-button>
                   <el-button class="deletText" @click="refuse(scope.row.id)" type="text">拒绝</el-button>
                 </div>
                 <div v-if="scope.row.status == '1' || scope.row.status == '4' ">
                   <!-- <el-button  class="ck" @click="clickSee(scope.row.id)" type="text">查看企业信息</el-button> -->
                   已通过
                 </div>
                 <div v-if="scope.row.status == '2' ">
                   <el-button  class="tg" @click="adopt(scope.row.id)" type="text">重新通过</el-button>
                 </div>
               </template>
             </el-table-column>
           </el-table>
           <div class="pagination">
             <el-pagination
             background
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="page.page"
               :page-size="page.size"
               layout="total, prev, pager, next, jumper"
               :total="parseInt(page.count)"
               align='left'
             ></el-pagination>
           </div>
        </el-tab-pane>
        <el-tab-pane label="待处理" name="1">
          <el-table
           @row-click="rowClick"
           align="center"
             :data="UserItem.slice((currentPage-1)*pagesize,currentPage*pagesize)"
             height="600"
             border
             style="width: 100%;margin: 20px 0;">
             <el-table-column
             align="center"
               prop="company"
               label="公司名称"
               width="220">
             </el-table-column>
             <el-table-column
             align="center"
               prop="username"
               label="联系人">
             </el-table-column>
             <el-table-column
             align="center"
               prop="mobile"
               label="电话">
             </el-table-column>
             <el-table-column
             align="center"
               prop="email"
               label="邮箱">
             </el-table-column>
             <el-table-column
             align="center"
               prop="create_on"
               label="申请时间">
             </el-table-column>
             <el-table-column
             align="center"
             width="100"
               label="操作">
               <template slot-scope="scope">
                 <el-button  class="tg" @click="adopt(scope.row.id)" type="text">通过</el-button>
                 <el-button class="deletText" @click="refuse(scope.row.id)" type="text">拒绝</el-button>
               </template>
             </el-table-column>
           </el-table>
           <div class="pagination">
             <el-pagination
             background
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="page.page"
               :page-size="page.size"
               layout="total, prev, pager, next, jumper"
               :total="parseInt(page.count)"
               align='left'
             ></el-pagination>
           </div>
        </el-tab-pane>
        <el-tab-pane label="已通过" name="2">
          <el-table
           @row-click="rowClick"
           align="center"
             :data="UserItem.slice((currentPage-1)*pagesize,currentPage*pagesize)"
             height="600"
             border
             style="width: 100%;margin: 20px 0;">
             <el-table-column
             align="center"
               prop="company"
               label="公司名称"
               width="220">
             </el-table-column>
             <el-table-column
             align="center"
               prop="username"
               label="联系人">
             </el-table-column>
             <el-table-column
             align="center"
               prop="mobile"
               label="电话">
             </el-table-column>
             <el-table-column
             align="center"
               prop="email"
               label="邮箱">
             </el-table-column>
             <el-table-column
             align="center"
               prop="create_on"
               label="申请时间">
             </el-table-column>
             <el-table-column
             align="center"
             width="100"
               label="操作">
               <template slot-scope="scope">
                 <!-- <el-button class="see" @click="clickSee(scope.row.id)" type="text">查看企业信息</el-button> -->
                 已通过
               </template>
             </el-table-column>
           </el-table>
           <div class="pagination">
             <el-pagination
             background
               background
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="page.page"
                 :page-size="page.size"
                 layout="total, prev, pager, next, jumper"
                 :total="parseInt(page.count)"
               align='left'
             ></el-pagination>
           </div>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="3">
          <el-table
           @row-click="rowClick"
           align="center"
             :data="UserItem.slice((currentPage-1)*pagesize,currentPage*pagesize)"
             height="600"
             border
             style="width: 100%;margin: 20px 0;">
            <el-table-column
            align="center"
              prop="company"
              label="公司名称"
              width="330">
            </el-table-column>
            <el-table-column
            align="center"
              prop="username"
               width="200"
              label="联系人">
            </el-table-column>
            <el-table-column
            align="center"
              prop="mobile"
              label="电话">
            </el-table-column>
            <el-table-column
            align="center"
              prop="email"
              label="邮箱">
            </el-table-column>
            <el-table-column
            align="center"
              prop="create_on"
               width="200"
              label="申请时间">
            </el-table-column>
             <el-table-column
             align="center"
               label="操作">
               <template slot-scope="scope">
                 <el-button class="tg" @click="adopt(scope.row.id)" type="text">重新通过</el-button>
               </template>
             </el-table-column>
           </el-table>
           <div class="pagination">
             <el-pagination
              background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.page"
                :page-size="page.size"
                layout="total, prev, pager, next, jumper"
                :total="parseInt(page.count)"
               align='left'
             ></el-pagination>
           </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <License @cancle="cancleLice" :item="businessInfo" :licenseVisible="licenseVisible"/>
    <el-dialog
     :close-on-click-modal='false'
      title="拒绝通过"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input v-model="error" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="config">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
   import {mapGetters} from 'vuex'
  import {userIndex,examine,exportUser} from "@/api/admin"
  import License from "@/components/License"
  export default {
    components:{
      License
    },
    data() {
      return {
        activeName: 'second',
        value: '',
        currentPage: 1, //默认显示页面为1
        pagesize: 10, //    每页的数据条数
        UserItem: [],
        status:'1',
        businessInfo:[],
        licenseVisible:false,
        dialogVisible:false,
        errId:null,
        error:'',
        page:[]
      }
    },
    computed:{
     ...mapGetters([
       'sidebar',
       'avatar',
       'name',
       'roles',
       'type',
       'is_admin_view',
       'rid'
     ]),
    },
    mounted() {
      this.getData();
    },
    methods: {
      clear(){
         this.getData();
      },
      async getData(){
        try{
          const resUser = await userIndex({status:this.status,keywords:this.value})
          this.UserItem =resUser.list
          this.page = resUser.page
        } catch (e){
          this.$message.error(e.message)
        }

      },
      rowClick(row){
        // console.log(row.id)
      },
      handleClick(tab, event) {
        // console.log(tab.index);
        this.status = tab.index
        this.getData();
      },
      clickEdit(id){
        // console.log(id)
      },
      clickbusiness(item){
        this.businessInfo = item;
        this.licenseVisible = true
      },
      cancleLice(val){
        this.licenseVisible = false;
        this.getData();
      },
      async adopt(id){
        try{
          await examine({
            id:id,
            status:1
          });
          this.getData();
          this.$message.success("审核通过");
          this.$router.push({path:"/user",query:{v:true,id:id}})
        } catch (e){
          this.$message.error(e.message)
        }
      },
      async refuse(id){
        this.errId = id;
        this.dialogVisible = true;
      },
      async search(){
        if(this.value){
          this.getData();
          // try{
          //   const resUser = await userIndex({keywords:this.value})
          //   this.UserItem =resUser.list
          // } catch (e){
          //   this.$message.error(e.message)
          // }
        }
      },
      clickSee(id){

      },
      async exports(){
        try{
          const res = await exportUser();
          const blob = new Blob([res.data]);
          const fileName = "申请记录.xlsx";
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } catch (e){
          this.$message.error(e.message)
        }

      },
      handleClose(){
        this.dialogVisible = false
      },
      async config(){
        try{
          await examine({
            id:this.errId,
            status:0,
            error:this.error
          });
          this.dialogVisible = false;
          this.getData();
          this.$message.success("审核不通过")
        } catch (e){
          this.$message.error(e.message)
        }
      },
      //每页下拉显示数据
      async handleSizeChange(size) {
        try{
          const resUser = await userIndex({status:this.status,keywords:this.value,page:size})
          this.UserItem =resUser.list
          this.page = resUser.page
        } catch (e){
          this.$message.error(e.message)
        }
      },
      //点击第几页
      async handleCurrentChange(currentPage) {
        try{
          const resUser = await userIndex({status:this.status,keywords:this.value,page:currentPage})
          this.UserItem =resUser.list
          this.page = resUser.page
        } catch (e){
          this.$message.error(e.message)
        }
      },
    }
  }
</script>

<style scoped >
  .pagination{
    margin:15px 0;
  }
  .el-pagination{
    text-align: right;
  }
</style>
